<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.notification {
				position: fixed;
				z-index: 1000;
				padding: 5px;
				border: 1px solid black;
				font-size: 20px;
				background: white;
				text-align: center;
			}

			.welcome {
				background: #b80000;
				color: yellow;
			}
		</style>
	</head>
	<body>
		<h2>Notification is on the right</h2>

		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum aspernatur quam ex eaque inventore quod
			voluptatem adipisci omnis nemo nulla fugit iste numquam ducimus cumque minima porro ea quidem maxime
			necessitatibus beatae labore soluta voluptatum magnam consequatur sit laboriosam velit excepturi laborum sequi eos
			placeat et quia deleniti? Corrupti velit impedit autem et obcaecati fuga debitis nemo ratione iste veniam amet
			dicta hic ipsam unde cupiditate incidunt aut iure ipsum officiis soluta temporibus. Tempore dicta ullam delectus
			numquam consectetur quisquam explicabo culpa excepturi placeat quo sequi molestias reprehenderit hic at nemo
			cumque voluptates quidem repellendus maiores unde earum molestiae ad.
		</p>

		<script>
			function showNotification({ top = 0, right = 0, className, html }) {
				const notification = document.createElement('div')

				notification.classList.add('notification', className)

				notification.style.top = top + 'px'
				notification.style.right = right + 'px'

				notification.innerHTML = html
				document.body.append(notification)

				setTimeout(() => {
					notification.remove()
				}, 1500)
			}

			// test it
			let i = 1
			setInterval(() => {
				showNotification({
					top: 10,
					right: 10,
					html: 'Hello ' + i++,
					className: 'welcome',
				})
			}, 2000)
		</script>
	</body>
</html>
